<template>
  <!--  展示全部订单-->
    <el-card class="box-card">
        <template #header>
            <div class="card-header">
                <span>挂号订单</span>
            </div>
        </template>
        <!--        提供用户选择的下拉菜单-->
        <el-form :inline="true">
            <el-form-item label="就诊人">
                <el-select placeholder="请选择就诊人" v-model="patientId" @change="changeTable">
                    <el-option  v-for="(user,index) in allUser"
                                :key="index"
                                :label="user.name"
                                :value="user.id"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="订单状态">
                <el-select placeholder="请选择订单状态" v-model="orderStatus"  @change="changeTable">
                    <el-option  v-for="(orderStatus,index) in allOrderStatus"
                                :key="index"
                                :label="orderStatus.comment"
                                :value="orderStatus.status"
                    ></el-option>
                </el-select>
            </el-form-item>
        </el-form>

        <!--        表格展示订单的数据-->
        <el-table :data="allOrderArr" border style="margin: 10px 0">
            <el-table-column label="就诊时间" prop="reserveDate"></el-table-column>
            <el-table-column label="医院" prop="hosname"></el-table-column>
            <el-table-column label="科室" prop="depname"></el-table-column>
            <el-table-column label="医生" prop="title"></el-table-column>
            <el-table-column label="医师服务费" prop="amount"></el-table-column>
            <el-table-column label="就诊人" prop="patientName"></el-table-column>
            <el-table-column label="订单状态" prop="param.orderStatusString"></el-table-column>
            <el-table-column label="操作">
                <template #="{row}">
                    <el-button type="text" @click="goDetail(row)">详情</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--        分页器-->
        <el-pagination
                v-model:current-page="pageNo"
                v-model:page-size="pageSize"
                :page-sizes="[10, 20, 30, 40]"
                :background="true"
                layout="prev,pager,next,jumper,sizes,total"
                :total="total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
        />
    </el-card>
</template>

<script setup lang="ts">
import {onMounted, ref} from "vue";
import {useRouter} from "vue-router";
import {reqUserOrderInfo, reqAllUser, reqOrderState} from "@/api/user/index.ts";
import {AllOrderState, AllUser, AllUserResponseData, records, UserOrderInfoResponseData} from "@/api/user/type.ts";
//当前分页器页码
let pageNo = ref<number>(1)
//当前页码展示几条数据
let pageSize = ref<number>(10)
//收集就诊人的id
let patientId = ref<string>('')
//收集订单的状态
let orderStatus = ref<string>('')
//存储所有的订单
let allOrderArr = ref<records>([])
//订单的个数
let total = ref<number>(0)

//收集所有的就诊人信息
let allUser  =ref<AllUser>([])

//收集订单状态的信息
let allOrderStatus = ref<AllOrderState>([])

let $router = useRouter()
onMounted(async () => {
    //获取所有订单信息
    await getOrderInfo()
    await getAllUser()
    await getOrderState()

})

//获取订单的方法
const getOrderInfo = async () => {
    let result: UserOrderInfoResponseData = await reqUserOrderInfo(pageNo.value, pageSize.value, patientId.value, orderStatus.value)
    if (result.code == 200) {
        allOrderArr.value = result.data.records
        total.value = result.data.total
    }
}

//详情按钮的回调
const goDetail = (row: any) => {
    $router.push({
        path: '/user/order', query: {
            orderId: row.id
        }
    })
}

//下拉菜单事件的回调
const handleSizeChange = (val: number) => {
    pageSize.value = val
    getOrderInfo()
}

//当前页码发生变化触发
const handleCurrentChange = (val: number) => {
    pageNo.value = val
    getOrderInfo()
}


//获取所有的就诊人
const getAllUser = async () => {
    let result: AllUserResponseData = await reqAllUser()
    if (result.code ==200){
        allUser.value = result.data
    }
}


//获取所有的订单状态
const getOrderState = async () => {
    let result: AllOrderStateResponseData = await reqOrderState()
    if (result.code ==200){
        allOrderStatus.value = result.data
    }
}


//筛选的值改变时的回调函数
const changeTable = async (val:string)=>{
   await getOrderInfo()
}

</script>


<style scoped lang="scss">

</style>